<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线实时聊天系统需求分析</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 40px;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            color: #1a73e8;
            text-align: center;
            font-size: 24pt;
            margin-bottom: 30px;
        }
        h2 {
            color: #1a73e8;
            font-size: 18pt;
            margin-top: 30px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        h3 {
            color: #1a73e8;
            font-size: 14pt;
            margin-top: 20px;
        }
        ul, ol {
            margin-left: 20px;
        }
        li {
            margin-bottom: 5px;
        }
        pre {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        code {
            font-family: Consolas, Monaco, 'Courier New', monospace;
            background-color: #f5f5f5;
            padding: 2px 4px;
            border-radius: 3px;
        }
        .architecture {
            font-family: Consolas, Monaco, 'Courier New', monospace;
            white-space: pre;
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>在线实时聊天系统需求分析</h1>

    <h2>核心功能</h2>
    <ol>
        <li><strong>用户管理</strong>：注册、登录、个人资料管理</li>
        <li><strong>聊天功能</strong>：
            <ul>
                <li>私聊：一对一聊天</li>
                <li>群聊：多人聊天室</li>
            </ul>
        </li>
        <li><strong>消息类型</strong>：
            <ul>
                <li>文本消息、表情</li>
                <li>语音消息</li>
                <li>视频消息</li>
                <li>文件传输</li>
            </ul>
        </li>
        <li><strong>通话功能</strong>：
            <ul>
                <li>语音通话</li>
                <li>视频通话</li>
            </ul>
        </li>
        <li><strong>实时通知</strong>：新消息提醒、在线状态显示</li>
        <li><strong>历史记录</strong>：查看历史聊天记录</li>
    </ol>

    <h2>功能边界</h2>
    <ol>
        <li><strong>MVP阶段</strong>：
            <ul>
                <li>基本用户认证</li>
                <li>文本消息的实时传输</li>
                <li>简单的好友/群组管理</li>
                <li>基础的历史消息查询</li>
            </ul>
        </li>
        <li><strong>第二阶段</strong>：
            <ul>
                <li>语音、视频、文件消息支持</li>
                <li>消息已读状态</li>
                <li>消息撤回功能</li>
            </ul>
        </li>
        <li><strong>第三阶段</strong>：
            <ul>
                <li>语音通话功能</li>
                <li>视频通话功能</li>
                <li>更复杂的权限管理</li>
            </ul>
        </li>
    </ol>

    <h2>技术选型</h2>

    <h3>前端 (Vue)</h3>
    <ol>
        <li><strong>框架</strong>：Vue 3 + Vite</li>
        <li><strong>UI库</strong>：Ant Design Vue</li>
        <li><strong>状态管理</strong>：Pinia</li>
        <li><strong>WebSocket客户端</strong>：Socket.io-client</li>
        <li><strong>HTTP请求</strong>：Axios</li>
        <li><strong>路由</strong>：Vue Router</li>
        <li><strong>响应式设计</strong>：
            <ul>
                <li>使用媒体查询和弹性布局</li>
                <li>Viewport meta标签配置</li>
                <li>使用rem/vw等相对单位</li>
            </ul>
        </li>
        <li><strong>实时通讯</strong>：
            <ul>
                <li>WebRTC：用于点对点语音/视频通话</li>
                <li>Socket.io：用于信令服务器</li>
            </ul>
        </li>
    </ol>

    <h3>后端 (Java)</h3>
    <ol>
        <li><strong>框架</strong>：Spring Boot</li>
        <li><strong>WebSocket</strong>：Netty (高性能异步事件驱动框架)</li>
        <li><strong>数据库</strong>：
            <ul>
                <li>MySQL：用户信息、关系数据</li>
                <li>Redis：缓存、在线状态管理、消息队列</li>
                <li>MongoDB：存储聊天历史记录(更适合非结构化数据)</li>
            </ul>
        </li>
        <li><strong>ORM</strong>：MyBatis</li>
        <li><strong>认证授权</strong>：Spring Security + JWT</li>
        <li><strong>API文档</strong>：Swagger/OpenAPI</li>
        <li><strong>文件存储</strong>：
            <ul>
                <li>本地文件系统(开发阶段)</li>
                <li>对象存储服务(生产环境)：如阿里云OSS、腾讯云COS</li>
            </ul>
        </li>
        <li><strong>媒体服务器</strong>：
            <ul>
                <li>信令服务器：自建基于Netty的信令服务</li>
                <li>TURN/STUN服务器：用于NAT穿透(可使用开源方案如coturn)</li>
            </ul>
        </li>
    </ol>

    <h2>系统架构</h2>
    <div class="architecture">
前端 (Vue)                      后端 (Java)                    数据存储
+-------------+                +----------------+            +-------------+
|             |  HTTP/REST     |                |            |             |
| Vue 3 App   |<-------------->| Spring Boot    |<---------->| MySQL       |
| (响应式SPA)  |                | REST Controllers|            | (关系数据)   |
|             |  WebSocket     |                |            |             |
|             |<-------------->| Netty          |            +-------------+
|             |                | WebSocket      |            |             |
| WebRTC      |  信令          | Handler        |<---------->| Redis       |
| (音视频通话) |<-------------->|                |            | (缓存/状态)  |
|             |                | 文件上传服务    |            |             |
+-------------+                |                |            +-------------+
                               |                |            |             |
                               |                |<---------->| MongoDB     |
                               |                |            | (聊天记录)   |
                               +----------------+            |             |
                                      |                     +-------------+
                                      v                     |             |
                               +----------------+           | 对象存储     |
                               | TURN/STUN      |           | (文件/媒体)  |
                               | 服务器         |           |             |
                               +----------------+           +-------------+
    </div>

    <h2>数据模型设计</h2>

    <h3>用户表 (User)</h3>
    <ul>
        <li>id: 主键</li>
        <li>username: 用户名</li>
        <li>password: 密码(加密存储)</li>
        <li>nickname: 昵称</li>
        <li>avatar: 头像URL</li>
        <li>status: 状态(在线/离线/忙碌)</li>
        <li>created_at: 创建时间</li>
        <li>updated_at: 更新时间</li>
    </ul>

    <h3>好友关系表 (Friendship)</h3>
    <ul>
        <li>id: 主键</li>
        <li>user_id: 用户ID</li>
        <li>friend_id: 好友ID</li>
        <li>status: 状态(待确认/已接受/已拒绝)</li>
        <li>remark: 备注名</li>
        <li>created_at: 创建时间</li>
    </ul>

    <h3>群组表 (Group)</h3>
    <ul>
        <li>id: 主键</li>
        <li>name: 群组名称</li>
        <li>creator_id: 创建者ID</li>
        <li>avatar: 群头像</li>
        <li>description: 群描述</li>
        <li>created_at: 创建时间</li>
    </ul>

    <h3>群组成员表 (GroupMember)</h3>
    <ul>
        <li>id: 主键</li>
        <li>group_id: 群组ID</li>
        <li>user_id: 用户ID</li>
        <li>role: 角色(管理员/普通成员)</li>
        <li>nickname: 群内昵称</li>
        <li>joined_at: 加入时间</li>
    </ul>

    <h3>消息表 (MongoDB Collection)</h3>
    <pre><code>{
  "_id": "ObjectId",
  "conversation_id": "String", // 会话ID (私聊: user1_user2, 群聊: group_groupId)
  "sender_id": "String",
  "receiver_id": "String", // 用户ID或群组ID
  "type": "String", // PRIVATE, GROUP
  "content_type": "String", // TEXT, IMAGE, VOICE, VIDEO, FILE
  "content": {
    "text": "String", // 文本内容
    "media_url": "String", // 媒体文件URL
    "file_name": "String", // 文件名
    "file_size": "Number", // 文件大小
    "duration": "Number", // 语音/视频时长
    "thumbnail": "String" // 缩略图URL
  },
  "status": "String", // SENT, DELIVERED, READ
  "created_at": "Date"
}</code></pre>

    <h3>通话记录表 (Call)</h3>
    <ul>
        <li>id: 主键</li>
        <li>caller_id: 发起人ID</li>
        <li>receiver_id: 接收人ID</li>
        <li>type: 类型(VOICE/VIDEO)</li>
        <li>status: 状态(MISSED/ANSWERED/REJECTED)</li>
        <li>start_time: 开始时间</li>
        <li>end_time: 结束时间</li>
        <li>duration: 通话时长(秒)</li>
    </ul>

    <h2>API设计</h2>

    <h3>用户相关</h3>
    <ul>
        <li>POST /api/auth/register - 用户注册</li>
        <li>POST /api/auth/login - 用户登录</li>
        <li>GET /api/users/profile - 获取个人资料</li>
        <li>PUT /api/users/profile - 更新个人资料</li>
        <li>GET /api/users/status - 获取在线状态</li>
        <li>PUT /api/users/status - 更新在线状态</li>
    </ul>

    <h3>好友相关</h3>
    <ul>
        <li>GET /api/friends - 获取好友列表</li>
        <li>POST /api/friends/request - 发送好友请求</li>
        <li>PUT /api/friends/request/{id} - 处理好友请求</li>
        <li>DELETE /api/friends/{id} - 删除好友</li>
        <li>PUT /api/friends/{id}/remark - 设置好友备注</li>
    </ul>

    <h3>群组相关</h3>
    <ul>
        <li>GET /api/groups - 获取群组列表</li>
        <li>POST /api/groups - 创建群组</li>
        <li>GET /api/groups/{id} - 获取群组详情</li>
        <li>PUT /api/groups/{id} - 更新群组信息</li>
        <li>POST /api/groups/{id}/members - 添加群成员</li>
        <li>DELETE /api/groups/{id}/members/{userId} - 移除群成员</li>
        <li>PUT /api/groups/{id}/members/{userId}/role - 更新成员角色</li>
    </ul>

    <h3>消息相关</h3>
    <ul>
        <li>GET /api/messages/private/{userId} - 获取与指定用户的私聊记录</li>
        <li>GET /api/messages/group/{groupId} - 获取指定群组的聊天记录</li>
        <li>POST /api/messages/read - 标记消息为已读</li>
        <li>DELETE /api/messages/{id} - 撤回消息</li>
    </ul>

    <h3>文件上传</h3>
    <ul>
        <li>POST /api/files/upload - 上传文件</li>
        <li>GET /api/files/{fileId} - 获取文件信息</li>
    </ul>

    <h3>通话相关</h3>
    <ul>
        <li>POST /api/calls/initiate - 发起通话</li>
        <li>PUT /api/calls/{id}/answer - 接听通话</li>
        <li>PUT /api/calls/{id}/reject - 拒绝通话</li>
        <li>PUT /api/calls/{id}/end - 结束通话</li>
        <li>GET /api/calls/history - 获取通话历史</li>
    </ul>

    <h3>WebSocket端点</h3>
    <ul>
        <li>/ws/chat - 聊天WebSocket连接点</li>
        <li>/ws/call - 通话信令WebSocket连接点</li>
    </ul>

    <h2>WebSocket消息格式</h2>

    <h3>聊天消息</h3>
    <pre><code>{
  "type": "MESSAGE",
  "data": {
    "id": "msg123",
    "senderId": "user1",
    "receiverId": "user2", // 或群组ID
    "chatType": "PRIVATE", // PRIVATE或GROUP
    "contentType": "TEXT", // TEXT, IMAGE, VOICE, VIDEO, FILE
    "content": {
      "text": "你好!",
      "mediaUrl": null,
      "fileName": null,
      "fileSize": null,
      "duration": null,
      "thumbnail": null
    },
    "timestamp": 1628097433000
  }
}</code></pre>

    <h3>状态消息</h3>
    <pre><code>{
  "type": "STATUS",
  "data": {
    "userId": "user1",
    "status": "ONLINE", // ONLINE, OFFLINE, BUSY
    "timestamp": 1628097433000
  }
}</code></pre>

    <h3>通话信令</h3>
    <pre><code>{
  "type": "CALL_SIGNAL",
  "data": {
    "callId": "call123",
    "signalType": "OFFER", // OFFER, ANSWER, ICE_CANDIDATE, HANG_UP
    "callType": "VIDEO", // AUDIO, VIDEO
    "senderId": "user1",
    "receiverId": "user2",
    "payload": {}, // SDP或ICE候选者数据
    "timestamp": 1628097433000
  }
}</code></pre>

    <h2>实现步骤</h2>
    <ol>
        <li><strong>搭建基础项目结构</strong>
            <ul>
                <li>创建前端Vue项目，配置响应式布局</li>
                <li>创建后端Spring Boot项目，集成Netty</li>
            </ul>
        </li>
        <li><strong>实现用户认证系统</strong>
            <ul>
                <li>注册/登录API</li>
                <li>JWT认证</li>
            </ul>
        </li>
        <li><strong>实现WebSocket连接</strong>
            <ul>
                <li>Netty WebSocket服务器配置</li>
                <li>前端Socket.io客户端</li>
            </ul>
        </li>
        <li><strong>实现基础聊天功能</strong>
            <ul>
                <li>文本消息发送/接收</li>
                <li>历史消息查询</li>
            </ul>
        </li>
        <li><strong>实现媒体消息功能</strong>
            <ul>
                <li>文件上传服务</li>
                <li>语音/视频/文件消息处理</li>
            </ul>
        </li>
        <li><strong>实现好友/群组管理</strong>
            <ul>
                <li>好友添加/删除</li>
                <li>群组创建/管理</li>
            </ul>
        </li>
        <li><strong>实现通话功能</strong>
            <ul>
                <li>WebRTC集成</li>
                <li>信令服务器</li>
                <li>TURN/STUN服务器配置</li>
            </ul>
        </li>
        <li><strong>UI开发</strong>
            <ul>
                <li>响应式聊天界面</li>
                <li>用户列表/群组列表</li>
                <li>通话界面</li>
            </ul>
        </li>
        <li><strong>测试与优化</strong>
            <ul>
                <li>功能测试</li>
                <li>性能优化</li>
                <li>移动端适配测试</li>
            </ul>
        </li>
    </ol>

    <h2>技术难点及解决方案</h2>
    <ol>
        <li><strong>WebRTC通话实现</strong>
            <ul>
                <li>难点：NAT穿透、信令交换</li>
                <li>解决方案：使用TURN/STUN服务器，自建信令服务器</li>
            </ul>
        </li>
        <li><strong>大规模WebSocket连接</strong>
            <ul>
                <li>难点：高并发连接管理</li>
                <li>解决方案：使用Netty的异步非阻塞IO，结合Redis进行分布式会话管理</li>
            </ul>
        </li>
        <li><strong>消息可靠性</strong>
            <ul>
                <li>难点：确保消息不丢失</li>
                <li>解决方案：消息确认机制，离线消息存储</li>
            </ul>
        </li>
        <li><strong>移动端适配</strong>
            <ul>
                <li>难点：不同设备屏幕尺寸适配</li>
                <li>解决方案：使用响应式设计，媒体查询，弹性布局</li>
            </ul>
        </li>
        <li><strong>大文件传输</strong>
            <ul>
                <li>难点：上传进度，断点续传</li>
                <li>解决方案：分片上传，断点续传机制</li>
            </ul>
        </li>
    </ol>
</body>
</html>